<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书兄弟</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/bookBrothers.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!--    http://shopvue.eduwork.cn/-->
</head>
<body>

<!--头部标题-->
<header class="w-100 d-flex bg-color-ffa666 justify-content-between align-items-center position-fixed">
    <div>
        <i class="iconfont font-16 font-color-white icon-jiantou_liebiaoxiangzuo_o"></i>
    </div>
    <div class="font-16 font-color-white text-center">图书兄弟</div>
    <div class="visually-hidden"><i class="iconfont font-16 font-color-white icon-jiantou_liebiaoxiangzuo_o"></i></div>
</header>


<!--轮播图-->
<section class="banner">
    <div>
        <img src="./img/a.png" alt="">
        <img src="./img/c.png" alt="">
        <img src="./img/b.png" alt="">
        <img src="./img/c.png" alt="">
    </div>
</section>


<!--首页商品推荐-->
<section class="recomment border-bottom d-flex justify-content-between align-items-center">
    <div>
        <a href="" class="d-flex flex-direction-column justify-content-between align-items-center">
            <img src="./img/1.png" alt="">
            <span class="font-666">《区块链》</span>
        </a>
    </div>

    <div>
        <a href="" class="d-flex flex-direction-column justify-content-between align-items-center">
            <img src="./img/2.png" alt="">
            <span class="font-666">《区块链》</span>
        </a>
    </div>

    <div>
        <a href="" class="d-flex flex-direction-column justify-content-between align-items-center">
            <img src="./img/3.png" alt="">
            <span class="font-666">《区块链》</span>
        </a>
    </div>

    <div>
        <a href="" class="d-flex flex-direction-column justify-content-between align-items-center">
            <img src="./img/4.png" alt="">
            <span class="font-666">《区块链》</span>
        </a>
    </div>

</section>


<!--首页商品分类导航栏-->
<div class="nav w-390px d-flex m-auto justify-content-between align-items-center">
    <div class="flex-grow-1 d-flex justify-content-center align-items-center">
        <span class="font-color-ffa666 font-14">畅销</span>
    </div>

    <div class="flex-grow-1 d-flex justify-content-center align-items-center">
        <span class="font-color-2c3e50 font-14">新书</span>
    </div>

    <div class="flex-grow-1 d-flex justify-content-center align-items-center">
        <span class="font-color-2c3e50 font-14">精选</span>
    </div>

</div>


<!--商品区域-->
<section class="goods w-390px m-auto d-flex justify-content-between">
    <!--商品1-->
    <div>
        <a href="">
            <img src="./img/1.png" alt="">
            <p class="text-center font-color-2c3e50">《区块链》</p>
            <div class="text-center">
                <span class="font-color-red">￥32.00</span>
                <span class="font-color-2c3e50"><i class="iconfont icon-wujiaoxingkong"></i>187</span>
            </div>
        </a>
    </div>

    <!--商品2-->
    <div>
        <a href="">
            <img src="./img/1.png" alt="">
            <p class="text-center font-color-2c3e50">《区块链》</p>
            <div class="text-center">
                <span class="font-color-red">￥32.00</span>
                <span class="font-color-2c3e50"><i class="iconfont icon-wujiaoxingkong"></i>187</span>
            </div>
        </a>
    </div>

    <!--商品3-->
    <div>
        <a href="">
            <img src="./img/1.png" alt="">
            <p class="text-center font-color-2c3e50">《区块链》</p>
            <div class="text-center">
                <span class="font-color-red">￥32.00</span>
                <span class="font-color-2c3e50"><i class="iconfont icon-wujiaoxingkong"></i>187</span>
            </div>
        </a>
    </div>

    <!--商品4-->
    <div>
        <a href="">
            <img src="./img/1.png" alt="">
            <p class="text-center font-color-2c3e50">《区块链》</p>
            <div class="text-center">
                <span class="font-color-red">￥32.00</span>
                <span class="font-color-2c3e50"><i class="iconfont icon-wujiaoxingkong"></i>187</span>
            </div>
        </a>
    </div>

    <!--商品5-->
    <div>
        <a href="">
            <img src="./img/1.png" alt="">
            <p class="text-center font-color-2c3e50">《区块链》</p>
            <div class="text-center">
                <span class="font-color-red">￥32.00</span>
                <span class="font-color-2c3e50"><i class="iconfont icon-wujiaoxingkong"></i>187</span>
            </div>
        </a>
    </div>

    <!--商品6-->
    <div>
        <a href="">
            <img src="./img/1.png" alt="">
            <p class="text-center font-color-2c3e50">《区块链》</p>
            <div class="text-center">
                <span class="font-color-red">￥32.00</span>
                <span class="font-color-2c3e50"><i class="iconfont icon-wujiaoxingkong"></i>187</span>
            </div>
        </a>
    </div>

</section>

<!--返回顶部-->
<div class="top"></div>



<!--底部导航栏-->
<nav class="w-100 d-flex bg-color-f6f6f6 position-fixed justify-content-between align-items-center">
    <div>
        <a href="" class="d-flex font-color-ffa666 flex-direction-column align-items-center justify-content-between">
            <i class="iconfont icon-shouye"></i>
            <span class="font-14">首页</span>
        </a>
    </div>

    <div>
        <a href="" class="d-flex font-color-2c3e50 flex-direction-column align-items-center justify-content-between">
            <i class="iconfont icon-fenlei"></i>
            <span class="font-14">分类</span>
        </a>
    </div>

    <div>
        <a href="" class="d-flex font-color-2c3e50 flex-direction-column align-items-center justify-content-between">
            <span>0</span>
            <i class="iconfont icon-gouwuche"></i>
            <span class="font-14">购物车</span>
        </a>
    </div>

    <div>
        <a href="" class="d-flex font-color-2c3e50 flex-direction-column align-items-center justify-content-between">
            <i class="iconfont icon-31wode"></i>
            <span class="font-14">我的</span>
        </a>
    </div>

</nav>

</body>
</html>